<template>
  <div class="blogs">
    <div class="content-header">
      <h1>博客管理<small>查看博客</small></h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item >后台管理</el-breadcrumb-item>
        <el-breadcrumb-item>博客管理</el-breadcrumb-item>
        <el-breadcrumb-item>查看博客</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--中间内容-->
    <div class="app-container">
		<div class="box">
			<el-table
				:data="tableData"
				v-loading="loading"
				element-loading-text="拼命加载中..."
				style="width:85%">
				<el-table-column
				  label="序号"
				  type="index">
				</el-table-column>
				<el-table-column
				  label="标题"
				  prop="title">
				</el-table-column>
				<el-table-column
				  label="类型"
				  prop="type_"
				  width="120">
				</el-table-column>
				<el-table-column
				  width="200"
				  label="发布时间"
				  prop="time_">
				</el-table-column>
				<el-table-column
				  label="浏览量"
				  prop="view_"
				  width="70">
				</el-table-column>
				<el-table-column
				  label="发布账号"
				  prop="user_id"
				  width="120">
				</el-table-column>
				<el-table-column
				  align="right">
<!-- 				  <template slot="header" slot-scope="scope">
					<el-input
					  v-model="search"
					  size="mini"
					  placeholder="搜索用户"/>
				  </template> -->
				  <template slot-scope="scope">
					<el-button
					    size="mini"
						type="success"
					    @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
					<el-button
					    size="mini"
					    type="danger"
					    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					<el-button
						size="mini"
						type="primary"
						@click="handleUpdate(scope.$index, scope.row)">修改</el-button>
				  </template>
				</el-table-column>
			</el-table>
			
			<el-pagination
			  background
			  layout="prev, pager, next"
			  :page-size="Pagesize"
			  :total="total"
			  @current-change="page">
			</el-pagination>
		</div>
    </div>
    <br>
    <br>
  </div>
</template>

<script>
	export default {
	  data() {
	    return {
	      tableData: [{
	        title:'标题标题标题标题标题标题标题标题标题标题标题标题',
			type_:"美食",
			time_:"2021-11-23 13:27:45",
			user_id:"admin",
	      }],
	      loading: true,
			//total数据库中的所有数据量，Pagesize每页的数据量
			Pagesize:8,
			total:20,
			//删除后用于进行界面刷新！！！！
			currentPage:1
	    }
	  },
	  created() {
		var that=this
		//初始化加载第一页的数据  120.26.196.115  localhost
		axios.get("http://"+that.$store.state.host+":8181/blog/findAllByPageDesc/"+1+"/"+that.Pagesize).then(function(res){
			 // console.log(res.data)
			 //由于这里使用的是自己编写的mybatisplus
			 //查询与查总数都是自己编写
			that.tableData=res.data.map.data
			that.total=res.data.map.countBlog
			//加载中的
			that.loading=false
		})	  	
	  },
	  methods:{
		    //handleUpdate  
			handleUpdate(index, row){
				//进行权限判断  为2的用户才能进行修改
				var that=this
				var user=JSON.parse(sessionStorage.getItem("user_info"))
				if(user.power==2){
					// console.log(index)
					// console.log(row)
					//跳转到修改博客的页面
					sessionStorage.setItem("blog",JSON.stringify(row))
					that.$router.push({path: "/update_blog_article"});
				}else{
					that.$message.warning('你不具有该权限!');
				}
			},
		    //查看详情页面 需要传递参数!!!!!
		    handleEdit(index, row) {
				// console.log(index, row);
				var that=this
				var user=JSON.parse(sessionStorage.getItem("user_info"))
				//页面传参数保存当前的博文数据
				if(user.power==2||user.power==1){
					sessionStorage.setItem("blog",JSON.stringify(row))
					that.$router.push({path: "/show_blog_aritle"});
				}else{
					that.$message.warning('你不具有该权限!');
				}
		    },
		    //删除按钮
		    handleDelete(index, row) {
				//打印的序号  
				// console.log(index)
				//打印的用户信息  row.id
				// console.log(row)
				var that=this
				var user=JSON.parse(sessionStorage.getItem("user_info"))
				//判断用户是否具有权限！！！！
				if(user.power==2){
					//进行删除操作前的再次询问！！！
					this.$confirm('此操作将永久删除 '+row.title+' , 是否继续?', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
						//用户点击了确认删除
						// console.log(row)
						//120.26.196.115  localhost
						axios.delete("http://"+that.$store.state.host+":8181/blog/deleteBlogById/"+row.id).then(function(res){
							//刷新当前界面
							that.page(that.currentPage);
							that.$message.success("删除成功!");
						}) 
					}).catch(() => {
						//用户点击了取消 
						// console.log("取消")	   
					});
				}else{
					that.$message.warning('你不具有该权限!');
				}
		    },
		    //分页查询
		    page(currentPage){
				var that=this
				//为了删除后用于界面刷新，所以保存一下！！！
				that.currentPage=currentPage
				//让界面加载
				that.loading=true
				// console.log(currentPage)
				//初始化加载第一页的数据  120.26.196.115  localhost
				axios.get("http://"+that.$store.state.host+":8181/blog/findAllByPageDesc/"+currentPage+"/"+that.Pagesize).then(function(res){
					 // console.log(res.data)
					 //由于这里使用的是自己编写的mybatisplus
					 //查询与查总数都是自己编写
					that.tableData=res.data.map.data
					that.total=res.data.map.countBlog
					//加载完成，隐藏!!!!
					that.loading=false
				})	
		    }		
	  }
	}
</script>

<style>
</style>

